import { DateView } from './DateView';
import { addDays } from './addDays';

const headers = [
  [
    { text: '序号', rowSpan: 2 },
    { text: '学习日期', rowSpan: 2 },
    { text: '学习内容', rowSpan: 2 },
    { text: '长期记忆复习周期（复习后打勾）', colSpan: 8 },
  ],
  [
    { text: '1天' },
    { text: '2天' },
    { text: '4天' },
    { text: '7天' },
    { text: '15天' },
    { text: '1月' },
    { text: '3月' },
    { text: '6月' },
  ],
];

export type EbbinghausTableProps<T> = {
  data: T[];
  renderTitle: () => React.ReactNode;
  renderContent: (item: T) => React.ReactNode;
  startDate?: Date | null;
};

export function EbbinghausTable<T>(props: EbbinghausTableProps<T>) {
  const { data, renderTitle = () => null, renderContent = (r) => <>{r}</>, startDate } = props;

  const toRecitation = (i: number, d: number) => {
    i = i - d;
    return i <= 0 || i > data.length ? null : i;
  };

  return (
    <>
      {/* 将标题从 thead 中拿出来了，放在 thead 中会在每页重复显示 */}
      <div className='bg-green center b-1 p-5' style={{ borderBottom: 'none' }}>
        {renderTitle()}
      </div>

      <table>
        <thead>
          {headers.map((r, i) => (
            <tr key={i}>
              {r.map((h, j) => {
                const { text, ...rest } = h;
                return (
                  <th key={j} {...rest}>
                    <div style={{ whiteSpace: 'nowrap' }}>{text}</div>
                  </th>
                );
              })}
            </tr>
          ))}
        </thead>
        <tbody>
          {/* 背诵新课，同时复习旧课 */}
          {data.map((r, i) => (
            <tr key={i} className='avoid-page-break'>
              <td className='red center'>{i + 1}</td>
              <td className='center'>
                <DateView date={startDate ? addDays(startDate, i) : null} />
              </td>
              <td className='p-5'>{renderContent(r)}</td>
              <td className='red center'>{toRecitation(i + 1, 1)}</td>
              <td className='red center'>{toRecitation(i + 1, 2)}</td>
              <td className='red center'>{toRecitation(i + 1, 4)}</td>
              <td className='red center'>{toRecitation(i + 1, 7)}</td>
              <td className='red center'>{toRecitation(i + 1, 15)}</td>
              <td className='red center'>{toRecitation(i + 1, 31)}</td>
              <td className='red center'>{/* {toRecitation(i + 1, 91)} */}</td>
              <td className='red center'>{/* {toRecitation(i + 1, 181)} */}</td>
            </tr>
          ))}
          {/* 没有新课了，复习旧课 */}
          {new Array(31).fill(0).map((_, i) => (
            <tr key={i} className='avoid-page-break'>
              <td className='red center'></td>
              <td className='center'>
                <DateView date={startDate ? addDays(startDate, i + data.length) : null} />
              </td>
              <td className='p-5 center'>-</td>
              <td className='red center'>{toRecitation(i + data.length + 1, 1)}</td>
              <td className='red center'>{toRecitation(i + data.length + 1, 2)}</td>
              <td className='red center'>{toRecitation(i + data.length + 1, 4)}</td>
              <td className='red center'>{toRecitation(i + data.length + 1, 7)}</td>
              <td className='red center'>{toRecitation(i + data.length + 1, 15)}</td>
              <td className='red center'>{toRecitation(i + data.length + 1, 31)}</td>
              <td className='red center'>{/* {toRecitation(i + 1, 91)} */}</td>
              <td className='red center'>{/* {toRecitation(i + 1, 181)} */}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}
